import bg from '@/assets/b_bg.png';
import { getListReview, handleSubReview } from '@/services/center';
import { findByCodeList } from '@/services/login';
import { useUrlParams } from '@/utils';
import { useRequest } from 'ahooks';
import {
  Button,
  Card,
  Col,
  Divider,
  Flex,
  Form,
  Input,
  Pagination,
  Rate,
  message,
  type PaginationProps,
} from 'antd';
import { useEffect, useState } from 'react';
import { Helmet, useIntl, useLocation } from 'umi';
import CommentCard from '../Product/components/CommentCard';

const Comment: React.FC = () => {
  const location = useLocation();
  const [pagePamras, setPagePamras] = useState({
    page: 1,
    pageSize: 6,
  });
  const [total, setTotal] = useState(0);
  const { page, pageSize } = pagePamras;
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<any>([]);
  const search = decodeURIComponent(location.search);
  const id = useUrlParams('id', search);
  const name = useUrlParams('name', search);
  const logo = useUrlParams('logo', search);
  const productName = useUrlParams('productName', search);
  const score = useUrlParams('score', search);
  const productType = useUrlParams('productType', search);
  const introduction = useUrlParams('introduction', search);
  const { data: optionsList } = useRequest(() => {
    return findByCodeList({
      code: 'productType',
    });
  });
  const { productType: productTypeList } = optionsList?.data || {};
  const onChange: PaginationProps['onChange'] = (page) => {
    setPagePamras({
      ...pagePamras,
      page,
    });
    document.documentElement.scrollTop = 500;
  };
  const loadMoreData = async () => {
    const { pageSize, page } = pagePamras;

    try {
      setLoading(true);
      const { data: applyList } = await getListReview({
        page,
        size: pageSize,
        productId: id,
      });

      const { records, total } = applyList;
      setTotal(total);
      setData(records);
      setLoading(false);
    } catch {
      setLoading(false);
    }
  };
  useEffect(() => {
    loadMoreData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pagePamras]);
  const intl = useIntl();
  return (
    <div>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
      </Helmet>
      <div className="common" style={{ paddingBottom: 220 }}>
        <div
          style={{
            backgroundImage: `url(${bg})`,
            backgroundSize: '100% 100%',
            margin: '60px 0 49px',
            padding: '33px',
            borderRadius: 8,
          }}
        >
          <div style={{ color: '#fff', lineHeight: '26px' }}>
            {productTypeList?.find((item) => item.value == productType)?.name}
          </div>

          <Flex style={{ margin: '6px 0 21px' }} gap={4} align="center">
            <Flex
              align="center"
              style={{
                backgroundColor: '#fff',
                borderRadius: 4,
                padding: '3px 0',
              }}
            >
              <img height={21} src={logo} />
            </Flex>
            <div style={{ color: '#fff', fontSize: 26, fontWeight: 700 }}>
              <div>
                {name}「{productName}」
              </div>
            </div>
          </Flex>
          <Flex gap={10} align="baseline">
            <Flex align="center" gap={8}>
              <div style={{ padding: '3px 5px' }} className="product_content_right_card_score">
                <span style={{ fontWeight: 700 }}>{score}/</span>
                <span style={{ opacity: 0.6 }}>{intl.formatMessage({ id: 'center.five' })}</span>
              </div>
              <Divider
                type="vertical"
                style={{ height: 15, background: '#FFFFFF', width: 2, top: 2 }}
              />
            </Flex>
            <Flex style={{ fontSize: 13, lineHeight: '26px', color: '#fff' }}>{introduction}</Flex>
          </Flex>
        </div>
        <div style={{ padding: '0 33px' }}>
          <div
            style={{
              fontSize: 26,
              color: '#0f294d',
              fontWeight: 700,
              marginBottom: 24,
            }}
          >
            {intl.formatMessage({ id: 'home.i_comment' })}
          </div>
          <Form
            onFinish={async (value: any) => {
              const { code } = await handleSubReview({
                ...value,
                productId: id,
              });
              if (code == '100200') {
                message.success({
                  content: intl.formatMessage({ id: 'home.comment_suc' }),
                  className: 'msg_center',
                });
                loadMoreData();
              }
            }}
            requiredMark={false}
            colon={false}
          >
            <Form.Item
              name="score"
              label={intl.formatMessage({ id: 'home.comment_score' })}
              rules={[{ required: true }]}
            >
              <Rate
                allowHalf
                character={
                  <svg
                    width="26"
                    height="24"
                    viewBox="0 0 26 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M7.19929 23.7857C6.60235 23.7857 6.02072 23.602 5.53092 23.2346C4.64317 22.5918 4.2146 21.5204 4.39827 20.4489L5.10235 16.3163C5.19419 15.7806 5.01052 15.2448 4.62786 14.8775L1.61256 11.9387C0.831944 11.1734 0.556434 10.0561 0.893169 9.01525C1.2299 7.97444 2.11766 7.22444 3.20439 7.07138L7.35235 6.47444C7.88807 6.39791 8.34725 6.06117 8.57684 5.58668L10.4289 1.82138C10.9187 0.826478 11.8983 0.214233 13.0003 0.214233C14.1024 0.214233 15.0819 0.826478 15.5564 1.80607L17.4238 5.57138C17.6687 6.04587 18.1279 6.3826 18.6483 6.45913L22.7962 7.05607C23.883 7.20913 24.7707 7.95913 25.1075 8.99995C25.4442 10.0408 25.1687 11.1581 24.3881 11.9234L21.3881 14.8469C21.0054 15.2142 20.8217 15.7653 20.9136 16.2857L21.6177 20.4183C21.8013 21.505 21.3728 22.5612 20.485 23.204C19.5972 23.8469 18.4493 23.9234 17.485 23.4183L13.7656 21.505C13.2911 21.2601 12.7248 21.2601 12.2503 21.505L8.53092 23.4642C8.10235 23.6785 7.64317 23.7857 7.19929 23.7857Z"
                      fill="currentcolor"
                    />
                  </svg>
                }
              />
            </Form.Item>
            <Form.Item
              name="content"
              labelCol={{ span: 24 }}
              label={intl.formatMessage({ id: 'home.comment_word' })}
              rules={[{ required: true, min: 5 }]}
            >
              <Input.TextArea
                showCount
                placeholder={intl.formatMessage({ id: 'home.input_comment' })}
                style={{ borderRadius: 0, height: 175, resize: 'none' }}
                maxLength={100}
              />
            </Form.Item>

            <Form.Item style={{ margin: '34px 0  0' }}>
              <Flex justify="start">
                <Button
                  htmlType="submit"
                  type="primary"
                  style={{
                    height: '60px',
                    minWidth: 200,
                    display: 'flex',
                    border: 'none',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  {intl.formatMessage({ id: 'home.submit_comment_word' })}
                </Button>
              </Flex>
            </Form.Item>
          </Form>
          <div style={{ margin: '47px 0 30px 0', fontSize: 16, fontWeight: 700, color: '#333' }}>
            {intl.formatMessage({ id: 'home.all_comment' })}({total})
          </div>
          <Card
            loading={loading}
            bordered={false}
            style={{ boxShadow: 'none' }}
            styles={{ body: { padding: 0 } }}
          >
            <CommentCard
              onDelete={() => {
                loadMoreData();
              }}
              data={data}
            />
          </Card>
          <Col style={{ marginTop: '20px', display: 'flex', justifyContent: 'flex-end' }}>
            <Pagination
              current={page}
              pageSize={pageSize}
              onChange={onChange}
              total={total}
              onShowSizeChange={(current: number) => {
                setPagePamras({
                  ...pagePamras,
                  pageSize: current,
                });
              }}
              showSizeChanger
              showQuickJumper
            />
          </Col>
        </div>
      </div>
    </div>
  );
};

export default Comment;
